<template>
    <div class="watermark" ref="watermark">
        <h2 style="text-align: center;">{{ month }}勤工助学考核、考勤表</h2>
        <h4>用人部门:{{ isEmpty(tableData) ? "" : tableData[0].deptName }}</h4>
        <table>
            <tr>
                <td>序号</td>
                <td>设岗部门</td>
                <td>岗位名称</td>
                <td>学号</td>
                <td>姓名</td>
                <td>身份证号</td>
                <td>学院</td>
                <td>班级</td>
                <td>固定岗位（A/B）</td>
                <td>困难类型</td>
                <td>工作内容</td>
                <td>工作时间</td>
                <td>总薪资/元</td>
                <td>银行卡号</td>
            </tr>
            <tr v-for="(v, i) in tableData" :key="i">
                <td>{{ i + 1 }}</td>
                <td>{{ v.deptName }}</td>
                <td>{{ v.postName }}</td>
                <td>{{ v.stuNo }}</td>
                <td>{{ v.stuName }}</td>
                <td>{{ v.idCard }}</td>
                <td>{{ v.stuDept }}</td>
                <td>{{ v.className }}</td>
                <td>{{ v.postType == "固定岗位A" ? "A" : "B" }}</td>
                <td>{{ v.familyCondition }}</td>
                <td>{{ v.workNeed }}</td>
                <td>{{ v.postType == "固定岗位A" ? v.totalTime + "天" : v.totalTime.toFixed(1) + "小时" }}</td>
                <td>{{
                    v.postType == "固定岗位A" ?
                        ((1990 / monthDays).toFixed(2) * v.totalTime).toFixed(0) > 1990 ? 1990 :
                            ((1990 / monthDays).toFixed(2) * v.totalTime).toFixed(0)
                        : (v.totalTime * 15).toFixed(1)
                }}
                </td>
                <td style="max-width: 150px;">{{ v.bankCard }}</td>
            </tr>
        </table>
        <div class="container">
            <div>
                部门领导:
            </div>
            <div>
                时间:{{ dayjs().format("YYYY.MM.DD") }}
            </div>
            <div>
                制表:
            </div>
            <div>
                总金额: {{ allMoney }}元
            </div>
        </div>
    </div>
</template>
<script>
import { isEmpty } from "@/api/helpFunc";
import dayjs from 'dayjs';


export default {
    name: "money-print",
    props: {
        month: { type: String, default: "" },
        deptName: { type: String, default: "" },
        tableData: {
            type: Array,
            default: () => {
                return [];
            },
        },
        monthDays: { type: Number, default: 21 },
    },
    data() {
        return {
            dayjs,
            isEmpty,
            allMoney: 0
        }
    },
    mounted() {
        this.addWatermark("广西水利电力职业技术学院学工系统");
    },
    watch: {
        tableData: function (newVal, oldVal) {
            this.allMoney = 0;
            this.tableData.map(x => {

                if (x.postType == "固定岗位A") {
                    this.allMoney += ((1990 / this.monthDays).toFixed(2) * x.totalTime).toFixed(0) > parseFloat(1990) ? 1990 :
                        parseFloat(((1990 / this.monthDays).toFixed(2) * x.totalTime).toFixed(0));
                } else {
                    this.allMoney += parseFloat( (x.totalTime * 15).toFixed(1) );
                }

            });
        }
    },
    methods: {
        addWatermark(text) {
            const watermarkDiv = this.$refs.watermark;
            const canvas = document.createElement('canvas');
            canvas.width = 700;
            canvas.height = 400;

            const ctx = canvas.getContext('2d');
            ctx.rotate(-20 * Math.PI / 180);
            ctx.font = '20px Arial';
            ctx.fillStyle = 'rgba(200, 200, 200, 0.50)';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.fillText(text, canvas.width / 2, canvas.height / 2);

            watermarkDiv.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
            watermarkDiv.style.pointerEvents = 'none';
            watermarkDiv.style.position = 'relative';
            watermarkDiv.style.top = 0;
            watermarkDiv.style.left = 0;
            watermarkDiv.style.zIndex = 99;
        }
    }
}

</script>
<style scoped>
table {
    width: 100%;
    border-collapse: collapse;
    /* 合并边框 */
    border: 1px solid black;
    color: black;
}



td {
    border: 1px solid black;
    text-align: center;

    word-wrap: break-word;
    word-break: break-all;
    max-width: 130px;
}

.container {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
}

@media print {
    @page {
        size: auto;
        /* 根据需要设置打印尺寸 */
        margin: 10mm;
        /* 设置页边距 */
        zoom: 60%;
        /* 设置缩放比例 */
    }
}
</style>